
import { increment, decrement, incrementByAmount, asyncFetchCount } from "../store/counter/counterSlice";
import { useAppSelector, useAppDispatch } from "../store";

export function Counter() { 
  const count = useAppSelector((state) => state.counter.value)
  const dispatch = useAppDispatch()

  return (
    <div>
      <h1>{count}</h1>
      <button
        aria-label="Increment value"
        onClick={() => dispatch(increment())}
      >
        Increment
      </button>
      <button
        aria-label="Decrement value"
        onClick={() => dispatch(decrement())}
      >
        Decrement
      </button>
      <button
        aria-label="Increment value"
        onClick={() => dispatch(incrementByAmount(5))}
      >
        Increment by 5
      </button>
      <button
        aria-label="async increment"
        onClick={() => dispatch(asyncFetchCount(10))}
      >
        Async Increment
      </button>
    </div>

  )
}